Angular হলো একটি TypeScript-ভিত্তিক ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা গুগল দ্বারা তৈরি এবং পরিচালিত। এটি মূলত ডায়নামিক ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য ব্যবহার করা হয়। Angular SPA (Single Page Application) তৈরি করতে ব্যবহৃত হয়, যেখানে ওয়েবপেজ রিফ্রেশ ছাড়াই ডেটা লোড এবং আপডেট করা সম্ভব।

Angular প্রথমে ২০১০ সালে AngularJS নামে পরিচিত ছিল। পরে এটি সম্পূর্ণ নতুন আর্কিটেকচারে রিডিজাইন করা হয় এবং Angular 2+ নামে পরিচিত হয়। বর্তমানে এটি Angular নামে পরিচিত।

Angular এর বৈশিষ্ট্য

• Component-based Architecture: Angular অ্যাপ্লিকেশন ছোট ছোট Components এ ভাগ করা হয় যা পুনরায় ব্যবহারযোগ্য এবং মডুলার।
• Two-Way Data Binding: ডেটা এবং UI এর মধ্যে রিয়েল-টাইম কনসিস্টেন্সি রাখা হয়।
• Dependency Injection: প্রয়োজনীয় সার্ভিস এবং অবজেক্টগুলো সহজে ইনজেক্ট করা যায়।
• Directives: HTML DOM-এর আচরণ নিয়ন্ত্রণ করার জন্য ব্যবহার করা হয়।
• Routing: একাধিক পেজ নেভিগেশনের জন্য রাউটিং সিস্টেম।
• RxJS Library: Reactive Programming এবং Asynchronous Data Handling এর জন্য।
• Cross-Platform Development: Angular দিয়ে ওয়েব, মোবাইল এবং ডেক্সটপ অ্যাপ তৈরি করা যায়।

Angular এর বেসিক ধারণা

মডিউল (Modules)

Angular অ্যাপ্লিকেশন Modules দিয়ে সংগঠিত হয়। প্রতিটি অ্যাপের একটি root module থাকে, যেটি AppModule নামে পরিচিত। মডিউল অ্যাপ্লিকেশনের বিভিন্ন ফিচার বা ফাংশনালিটি ভাগ করে।

কম্পোনেন্ট (Components)

Components হলো Angular অ্যাপ্লিকেশনের বিল্ডিং ব্লক। প্রতিটি কম্পোনেন্ট একটি Template (HTML), Class (TypeScript), এবং Style (CSS) নিয়ে তৈরি হয়।

কম্পোনেন্টের গঠন:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root', // HTML ট্যাগ হিসেবে ব্যবহৃত হয়
  templateUrl: './app.component.html', // HTML টেমপ্লেট
  styleUrls: ['./app.component.css'] // CSS স্টাইল
})
export class AppComponent {
  title = 'Angular Application'; // ডেটা বা প্রোপার্টি
}

ডিরেক্টিভস (Directives)

Angular এর ডিরেক্টিভস HTML DOM এর আচরণ কাস্টমাইজ করতে ব্যবহৃত হয়। তিন ধরনের ডিরেক্টিভস রয়েছে:

• Attribute Directives: DOM-এর স্টাইল বা আচরণ পরিবর্তন করে। উদাহরণ: ngStyle, ngClass।
• Structural Directives: HTML এলিমেন্ট যোগ বা অপসারণ করে। উদাহরণ: *ngIf, *ngFor।
• Custom Directives: কাস্টম DOM মডিফিকেশন।

ডেটা বাইন্ডিং (Data Binding)

Angular ডেটা এবং UI-র মধ্যে যোগাযোগ নিশ্চিত করে। এটি চার ধরনের হতে পারে:

• Interpolation: টেমপ্লেটে ডেটা প্রদর্শন। উদাহরণ: {{ title }}
• Property Binding: DOM এলিমেন্টের প্রোপার্টি পরিবর্তন। উদাহরণ: [src]="imageURL"
• Event Binding: ইভেন্ট হ্যান্ডলিং। উদাহরণ: (click)="doSomething()"
• Two-Way Binding: ডেটা এবং UI-র মধ্যে দ্বিমুখী যোগাযোগ। উদাহরণ: [(ngModel)]="name"

সার্ভিস এবং ডিআই (Services and Dependency Injection)

Angular-এ Services ব্যবহার করে কোড পুনঃব্যবহারযোগ্য এবং লজিক্যাল ইউনিটে ভাগ করা যায়। Dependency Injection সার্ভিসগুলোকে বিভিন্ন কম্পোনেন্টে সরবরাহ করতে ব্যবহৃত হয়।

Angular ব্যবহার শুরু করার ধাপ

Step 1: Angular CLI ইন্সটল

Angular CLI (Command Line Interface) ব্যবহার করে দ্রুত প্রজেক্ট তৈরি করা যায়। CLI ইন্সটল করতে:

npm install -g @angular/cli

Step 2: নতুন প্রজেক্ট তৈরি

ng new my-angular-app
cd my-angular-app

Step 3: প্রজেক্ট রান করা

ng serve

এরপর ব্রাউজারে http://localhost:4200 URL-এ অ্যাপটি দেখতে পারবেন।

সারাংশ

Angular একটি আধুনিক, স্কেলেবল এবং শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা SPA তৈরি করার জন্য জনপ্রিয়। এর Component-based Architecture, Two-way Data Binding, এবং Dependency Injection Angular-কে ডেভেলপারদের জন্য একটি চমৎকার টুলে পরিণত করেছে।